<template>
	<view class="evaluate">
		<image :src="query.avatar" mode="aspectFill" class="profile" @click="previewAvatar"></image>
		<view class="right_comlumn">
			<view class="top1">
				<view class="name">
					{{query.nickname}}
				</view>
				<view class="time">
					{{query.eva_date}}
				</view>
			</view>
			<view class="top2">
				<view class="size1 color1">
					满意度
				</view>
				<view class="margin">
					<view v-for="(item,index) in 5" :key="index" class="icon" @click="previewSatisfaction(index)">
						<image :src="index < query.satis ?$IMG_URL('/static/newVersion/eva2.png'):$IMG_URL('/static/newVersion/eva1.png')"
							mode="" class="img"></image>
					</view>
				</view>
				<text class="size1 color1">服务</text>
				<text class="size1 color2">{{query.serve}}</text>
				<text class="size1 color1">分</text>
				<view class="margin">
					<text class="size1 color1">专业</text>
					<text class="size1 color2">{{query.major}}</text>
					<text class="size1 color1">分</text>
				</view>
			</view>
			<view class="content" @click="toggleContent">
				{{ isContentExpanded ? query.word : truncatedContent }}
				<text v-if="query.word.length > 100" class="expand-text">
					{{ isContentExpanded ? '收起' : '展开' }}
				</text>
			</view>
			<view class="img_box">
				<view v-for="(item,index) in query.eva_image_list" :key="index" class="Item1"
					:class="(index + 1) % 3 === 0 ? '' : 'mr'" @click="$PREVIEW_IMAGEARRAY(query.eva_image_list, index)">
					<image :src="item" mode="aspectFill" class="img"></image>
					<view class="img-overlay" v-if="query.eva_image_list.length > 0">
						<image :src="$IMG_URL('/static/newVersion/preview.png')" mode="aspectFit" class="preview-icon"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			query: {
				type: Object,
				default: {},
				required: true
			},
		},
		data() {
			return {
				isContentExpanded: false
			}
		},
		computed: {
			truncatedContent() {
				if (this.query.word && this.query.word.length > 100) {
					return this.query.word.substring(0, 100) + '...';
				}
				return this.query.word;
			}
		},
		methods: {
			previewAvatar() {
				if (this.query.avatar) {
					uni.previewImage({
						urls: [this.query.avatar]
					});
				}
			},
			previewSatisfaction(index) {
				// 可以在这里添加满意度评分的详细说明或反馈功能
				console.log('查看满意度评分详情:', index);
			},
			toggleContent() {
				if (this.query.word && this.query.word.length > 100) {
					this.isContentExpanded = !this.isContentExpanded;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluate {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 24rpx;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		transform: translateZ(0);
		
		&:active {
			transform: scale(0.99);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		}

		.profile {
			width: 70rpx;
			height: 70rpx;
			background: #f6f6f6;
			border-radius: 50%;
			margin-right: 16rpx;
			object-fit: cover;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(1.1);
			}
		}

		.right_comlumn {
			display: flex;
			flex-direction: column;
			flex: 1;

			.top1 {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 5rpx;

				.name {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #333333;
					flex: 1;
				}

				.time {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.top2 {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				margin-bottom: 18rpx;
				flex-wrap: wrap;

				.size1 {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #666666;
				}

				.color2 {
					color: #73F0EA;
				}

				.color1 {
					color: #666666;
				}

				.margin {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin: 0 8rpx;
				}

				.icon {
					width: 24rpx;
					height: 24rpx;
					margin-right: 2rpx;
					transition: transform 0.2s ease;
					
					&:active {
						transform: scale(1.2);
					}

					.img {
						width: 100%;
						height: 100%;
						margin-right: 2rpx;
					}
				}
			}

			.content {
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: left;
				color: #333333;
				margin-bottom: 20rpx;
				line-height: 1.5;
				transition: all 0.3s ease;
				
				&:active {
					background-color: rgba(115, 240, 234, 0.1);
					border-radius: 8rpx;
				}
				
				.expand-text {
					color: #73F0EA;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.img_box {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;

				.Item1 {
					width: 176rpx;
					height: 176rpx;
					background: rgba(0, 0, 0, 0.00);
					border-radius: 16rpx;
					margin-bottom: 20rpx;
					position: relative;
					overflow: hidden;
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.95);
					}

					.img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
					
					.img-overlay {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background: rgba(0, 0, 0, 0.3);
						display: flex;
						align-items: center;
						justify-content: center;
						opacity: 0;
						transition: opacity 0.3s ease;
						
						.preview-icon {
							width: 48rpx;
							height: 48rpx;
						}
					}
					
					&:hover .img-overlay {
						opacity: 1;
					}
				}
			}
		}
	}

	.mr {
		margin-right: 20rpx;
	}
</style>